<template>
    <div>
        <Card>
            <p slot="title">
                管理员列表
            </p>
            <span slot="extra">
                <Button
                    type="error"
                    @click="deleteAll"
                >删除</Button>
                <Button
                    type="primary"
                    @click="addBtn"
                >添加</Button>
            </span>
            <Row class="functionWrapper">
                <div class="searchWrapper clearfix">
                    <div class="poptip">
                        <Poptip
                            trigger="hover"
                            content="帐号"
                            placement="bottom-start"
                        >
                            <Input
                                placeholder="帐号搜索"
                                clearable
                                v-model="filterSearch.account"
                            />
                            </Input>
                        </Poptip>
                    </div>
                    <div class="poptip">
                        <Poptip
                            trigger="hover"
                            content="昵称"
                            placement="bottom-start"
                        >
                            <Input
                                placeholder="昵称搜索"
                                clearable
                                v-model="filterSearch.nick_name"
                            />
                            </Input>
                        </Poptip>
                    </div>
                    <div class="btns">
                        <Button
                            type="info"
                            size="small"
                            @click="getList"
                        >搜索</Button>
                    </div>
                </div>
            </Row>
            <Row>
                <Table
                    :columns="columns"
                    :data="template_list"
                    :loading="listLoading"
                    @on-selection-change="selected"
                    border
                >
                    <template
                        slot-scope="{ row, index }"
                        slot="role"
                    >
                        <span
                            class="badge badge-success"
                            v-if="row.is_supper"
                        >
                            超级管理员
                        </span>
                        <span
                            v-else
                            v-for="(role, index) in row.roles"
                            :key="index"
                            class="badge badge-secondary mr-2"
                        >
                            {{role.name}}
                        </span>
                    </template>
                    <template
                        slot-scope="{ row, index }"
                        slot="status"
                    >
                        <span
                            v-if="row.status == 1"
                            class="badge badge-success"
                        >正常</span>
                        <span
                            v-else
                            class="badge badge-warning"
                        >禁用</span>
                    </template>
                    <template
                        slot-scope="{ row, index }"
                        slot="action"
                    >
                        <Button
                            type="primary"
                            size="small"
                            v-if="!row.is_supper"
                            style="margin-right: 5px"
                            @click="modifyBtn(row)"
                        >编辑</Button>
                    </template>
                </Table>
            </Row>
            <Row class="pageWrapper">
                <Page
                    :total="page.total"
                    :page-size="page.size"
                    class="buttomPage"
                    @on-change="changePage"
                    :current="page.current"
                    show-elevator
                ></Page>
            </Row>
        </Card>
        <Modal
            v-model="ifModify"
            title="编辑/添加"
            @on-ok="addOrEdit(form, rules)"
        >
            <Form
                :model="form"
                :rules="ruleFrom"
                :label-width="80"
            >
                <FormItem label="账号:">
                    <Input
                        v-model="form.account"
                        placeholder="账号..."
                    ></Input>
                </FormItem>
                <FormItem label="昵称:">
                    <Input
                        v-model="form.nick_name"
                        placeholder="昵称..."
                    ></Input>
                </FormItem>
                <FormItem
                    label="密码:"
                    prop="password"
                    class="resetRequired"
                    :class="{ 'resetFromErr': !pwd_check}"
                >
                    <Tag color="blue">修改时，填写则表示修改密码，不填则原来密码</Tag>
                    <Input
                        type="password"
                        v-model="form.password"
                    ></Input>
                    <div
                        v-if="!pwd_check"
                        class="ivu-form-item-error-tip"
                    >两次密码输入不一致！</div>
                </FormItem>
                <FormItem
                    v-if="form.password != ''"
                    label="确认密码:"
                    prop="passwdCheck"
                    class="resetRequired"
                    :class="{ 'resetFromErr': !pwd_check}"
                >
                    <Input
                        type="password"
                        v-model="form.password_confirmation"
                    ></Input>
                    <div
                        v-if="!pwd_check"
                        class="ivu-form-item-error-tip"
                    >两次密码输入不一致！</div>
                </FormItem>
                <FormItem label="状态:">
                    <RadioGroup v-model="form.status">
                        <Radio :label="1">
                            <Icon type="1"></Icon>
                            <span>启用</span>
                        </Radio>
                        <Radio :label="2">
                            <Icon type="2"></Icon>
                            <span>禁用</span>
                        </Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="角色">
                    <Select
                        v-model="form.roles"
                        multiple
                    >
                        <Option
                            v-for="(role, index) in roles"
                            :value="role.id"
                            :key="index"
                        >{{ role.name }}</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
import common from '@/libs/common.js'
export default {
    mixins: [common],
    data() {
        return {
            preUrl: 'rbac/admin',
            roles: [],
            columns: [{
                    type: 'selection',
                    width: 60
                }, {
                    title: "帐号",
                    key: "account"
                },
                {
                    title: "昵称",
                    key: "nick_name"
                },
                {
                    title: "角色",
                    key: "role",
                    slot: "role"
                },
                {
                    title: "状态",
                    key: "status",
                    slot: "status"
                },
                {
                    title: "操作",
                    key: "action",
                    slot: "action"
                }
            ],
            filterSearch: {
                account: '',
                nick_name: '',
            },
            ruleFrom: {
                account: [
                    { required: true, message: '账号不能为空！', trigger: 'blur' }
                ],
                nick_name: [
                    { required: true, message: '昵称不能为空！', trigger: 'blur' }
                ],
                roles: [
                    { required: true, message: '角色不能为空！', trigger: 'blur' }
                ],
            },
            form: {
                id: 0,
                account: '',
                nick_name: '',
                roles: [],
                status: 1,
                password_confirmation: '',
                password: ''
            }

        }
    },

    computed: {

        // 检查两次密码是否一致
        pwd_check() {
            return this.form.password === this.form.password_confirmation
        },
    },

    mounted() {
        // 获取参数
        this.getOptions()
    },

    methods: {
        getOptions() {
            let url = 'rbac/admin/options'
            this.$ajax.post(url)
                .then(res => {
                    if (!res.error_code) {
                        this.roles = res.data.list
                    }

                }).catch(err => console.log(err))
        },
        addBtn() {
            this.form = {
                id: 0,
                account: '',
                nick_name: '',
                roles: [],
                status: 1,
                password_confirmation: '',
                password: ''
            }
            this.ifModify = true

        },
        modifyBtn(row) {
            let roles = []
            row.roles.forEach(role => roles.push(role.id))

            this.form = {
                account: row.account,
                nick_name: row.nick_name,
                roles: roles,
                status: row.status,
                password_confirmation: '',
                password: '',
                id: row.id
            }
            this.ifModify = true
        },
        rules() {
            // 检测标识
            if (this.form.account.trim() == '') {
                this.$Message.warning('请填写账号')
                return false
            }

            // 检测标题
            if (this.form.nick_name.trim() == '') {
                this.$Message.warning('请填写昵称')
                return false
            }

            // 新增必须填写密码
            if (this.form.id === 0 && this.form.password.trim() == '') {
                this.$Message.warning('请填写必须')
                return false
            }

            // 检测标题
            if (this.form.roles.length == 0) {
                this.$Message.warning('请选择角色')
                return false
            }

            return true
        },
    },

};
</script>
<style
    lang="less"
    scoped
></style>